import { Props } from "src/types/shape";
import drawPoint from "./Points";
// import Scene from "./Scene";

//笔
export default class {
    private scene: any //画布对象
    private isMove: boolean = false //移动锁
    private addcanvasMousedown: any //鼠标按下
    private addcanvasMousemove: any //鼠标移动
    private addcanvasMouseup: any   //鼠标抬起
    private wayList: Array<object> = [] //画笔路径列表
    public size:number = 1
    public color:string = 'black'

    shape: any
    
    constructor(scene: any) {
        this.scene = scene
    }
    /**
     * 打开画笔
     */
    open() {
        const { domElement, ctx } = this.scene
        this.addcanvasMousedown = this.canvasMousedown.bind(this, ctx)
        this.addcanvasMousemove = this.canvasMousemove.bind(this, ctx)
        this.addcanvasMouseup = this.canvasMouseup.bind(this)
        domElement.addEventListener('mousedown', this.addcanvasMousedown)
        domElement.addEventListener('mousemove', this.addcanvasMousemove)
        domElement.addEventListener('mouseup', this.addcanvasMouseup)
    }

    /**
     * 鼠标按下
     * @param ctx 画布
     * @param e 事件回调参数
     */
    canvasMousedown(ctx: CanvasRenderingContext2D, e: MouseEvent): void {

        this.wayList.push()
        this.wayList.push({ x: e.offsetX, y: e.offsetY })

        const shape = new drawPoint({ pointList: this.wayList })
        shape.props.bgcolor = this.color
        shape.props.borderWidth = this.size
        this.scene.add(shape)

        this.shape = shape

        this.isMove = true
    }
    /**
     * 鼠标移动
     *  @param ctx 画布
     *  @param e 事件回调参数
     */
    canvasMousemove(ctx: CanvasRenderingContext2D, e: MouseEvent): void {        
        if (this.isMove) {
            this.wayList.push({ x: e.offsetX, y: e.offsetY })
            this.shape.pointList = this.wayList
            this.scene.render()
        }
    }
    /**
     * 鼠标抬起事件
     * @param e 事件回调参数
     */
    canvasMouseup(e: MouseEvent): void {
        this.wayList.push({ x: e.offsetX, y: e.offsetY })
        let maxX = 0, maxY = 0, minX = 0, minY = 0
        this.wayList.forEach((item:any,index)=>{
            if(index == 0) {
                minX = item.x, minY = item.y
            }
            if(item.x > maxX) maxX = item.x
            if(item.y > maxY) maxY = item.y
            if(item.x < minX) minX = item.x
            if(item.y < minY) minY = item.y
        })

        this.shape.setProps(Object.assign(new Props(),{
            id: this.shape.id,
            width: maxX - minX,
            height: maxY - minY,
            x: minX,
            y: minY
        }))
        this.wayList = []
        this.scene.setHistory()
        this.scene.render()

        this.isMove = false
    }
    /**
     * 画笔关闭
     */
    close() {
        const { domElement } = this.scene
        domElement.removeEventListener('mousedown', this.addcanvasMousedown)
        domElement.removeEventListener('mousemove', this.addcanvasMousemove)
        domElement.removeEventListener('mouseup', this.addcanvasMouseup)
    }

}